<template>
    <!--    文章内容-->

    <article ref="nodePreviewRef" id="preview-md" class="article-con preview">1232</article>
</template>

<script>
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'


import { getArticle } from '@/api/article'
import marked from 'marked'
import Prism from 'prismjs' // 代码高亮

export default {
    name: '',
    async setup() {
        console.log('setup');
        onMounted(() => {
            console.log(2333);
            console.log(nodePreviewRef);
            console.log(nodePreviewRef.value);
            nodePreviewRef.value.innerHTML = marked(articleObj.content)
            // 添加行号
            let aCode = nodePreviewRef.value.querySelectorAll('code')
            aCode.forEach((item) => {
                item.className.includes('language') && item.classList.add('line-numbers')
            })
            Prism.highlightAll()


        })

        const route = useRoute()

        const articleId = route.params.id

        const { status, result } = await getArticle(articleId)
        if (status != 200 || !result.length) return

        let articleObj = result[0]

        const nodePreviewRef = ref(null)


        return { nodePreviewRef }
    },
}
</script>

<style scoped>
.preview {
    width: 100%;
    text-align: left;
}

</style>
